<template>
	<scroll-view class="product-scroll" scroll-y="true" @scrolltolower="toLoadMore">
		<view class="product-list">
			<view class="product-item" v-for="(item, index) in goodsList" @click.stop="handleItem(item.id)" :key="index"
				:style="[goodsItemSpace]">
				<view class="product-pic">
					<image lazy-load :src="item.cover_pic" mode="aspectFill" />
					<goodsSaleNo v-if="item.product_type != 7" :imgHeight="'16.8vw'" :goodsInfo="item"
						:imgMode="'heightFix'"></goodsSaleNo>
					<view class="product-take_price" v-if="item.take_price > 0">可使用联盟券: ¥{{ item.take_price }}</view>
					<view class="product-take_price" style="bottom: 90rpx" v-if="item.send_price > 0">可获得联盟券: ¥{{ item.send_price }}</view>
				</view>
				<view class="goods-info">
					<view class="goods-title" :style="{ color: propsData.params.producNameColor }">{{ item.name }}
					</view>

					<view class="goods-seckill1" v-if="item.delivery_rules&& typeGroup!=1">
						{{ item.delivery_rules.times }}
					</view>
					<view class="df" v-if="typeGroup==1">
						<view class="goods-seckill">
							<view
								style="background-color: #FE4D3A; border-radius: 0px 0px 6px 0px;padding-right:3px;padding-left:1px;font-weight: 500;font-size: 10px;">
								{{item.status.status==1?'距结束':'距开始'}}
							</view>
							<view
								style="padding-left:6px; padding-right:3px; background-color: #FFEEEE;border-radius: 6px 0px 0px 0px; color:#F0250E;font-weight: 500;font-size: 10px;">
								<!-- {{item.status.time}} -->
								{{ formatCountdown(item.status.time) }}
							</view>
						</view>
						<view style="margin-left:3px;font-size: 12px;color: #FF5C26;font-weight: 400;" v-if="item.delivery_rules">
							{{ item.delivery_rules.times}}
						</view>
					</view>


					<view class="info-down">
						<view class="price-box">
							<view class="price" :style="{ color: propsData.params.priceColor }">
								<view>￥</view>
								<view>{{ item.price | priceBeforeZero }}</view>
								<view>{{ item.price | priceAfterZero }}</view>
							</view>
							<view class="origin-price" v-if="showPrice"
								:style="{ color: propsData.params.originPriceColor }">
								￥{{ item.original_price || item.price }}</view>
						</view>
						<view class="goods-sales" :style="{ color: propsData.params.saleColor }" v-if="showSales">
							{{ $t("list.sold") + " " + item.virtual_sales }}</view>
						<view class="buy-btn" v-if="
                showBuyBtn && (item.product_type == 0 || item.product_type == 4)
              ">
							<buyBtn @handleBuy="buyBtn(item)" :propsData="propsData">
							</buyBtn>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		diyMixin
	} from "../../mixins/diy";
	import buyBtn from "../components/buyBtn.vue";
	import goodsSaleNo from "@/components/goodsSaleNo/index.vue";

	export default {
		props: {
			propsData: {
				type: Object,
				default: () => {
					return {};
				},
			},
			goodsList: {
				type: Array,
				default: [],
			},
			goodsItemSpace: {
				type: Object,
				default: {},
			},
			typeGroup: {
				type: Number,
			},
		},
		mixins: [diyMixin], //混入文件
		data() {
			return {
				timers: [] // 存储定时器
			};
		},
		components: {
			buyBtn,
			goodsSaleNo,
		},
		watch: {
		  goodsList: {
		    handler(newVal, oldVal) {
		      // 在这里检查 goodsList 是否有数据
		      if (newVal.length > 0) {
		        // 执行 mounted 方法中的逻辑处理
		        this.handleGoodsList();
		        // 取消对 goodsList 的监听
		        this.$options.watch.goodsList = null;
		      }
		    },
		    immediate: true, // 立即执行一次 handler 方法
		  },
		},
		beforeDestroy() {
			this.timers.forEach(timer => clearInterval(timer));
		},

		computed: {
			showBuyBtn() {
				return this.propsData.params.showBuyBtn;
			},
			showPrice() {
				return this.propsData.params.showPrice;
			},
			showSales() {
				return this.propsData.params.showSales;
			},
		},

		methods: {
			  handleGoodsList() {
			    this.goodsList.forEach((item, index) => {
			      if (this.goodsList[index].status.time) {
			        let timer = setInterval(() => {
			          // 在定时器的闭包中使用局部变量 item 和 index，确保每个定时器操作的是对应的商品对象
			          this.$set(this.goodsList[index].status, 'time', this.goodsList[index].status.time - 1);
			        }, 1000);
			        // 将定时器存储起来，以便在组件销毁时清除
			        this.timers.push(timer);
			      } else {
			        return;
			      }
			    });
			  },
			formatCountdown(seconds) {
				if (seconds <= 0 || !seconds) {
					return '0';
				}
				let hours = Math.floor(seconds / 3600);
				let minutes = Math.floor((seconds % 3600) / 60);
				let remainingSeconds = seconds % 60;
				return `${hours}小时 ${minutes}分钟 ${remainingSeconds}秒`;
			},
			buyBtn(item) {
				this.$emit("clickBuyBtn", {
					item
				});
			},
			handleItem(id) {
				this.$emit("toGoodDetail", {
					id
				});
			},
			toLoadMore() {
				this.$emit("scrollToEnd");
			},
		},
	};
</script>

<style scoped lang="scss">
	.product-scroll {
		width: 100%;
		overflow: hidden;

		.product-list {
			width: 100%;
		}

		.product-item {
			display: flex;
			align-items: center;
			padding: 2.27%;
			background-color: #ffffff;
			border-radius: 1.34vw;
			overflow: hidden;

			.product-pic {
				width: 25.64%;
				height: 24vw;
				border-radius: 1.34vw;
				overflow: hidden;
				margin-right: 3.41%;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
				.product-take_price {
					position: absolute;
					display: inline-block;
					background-color: rgba(0, 0, 0, 0.5);
					border-radius: 0 20rpx 20rpx 0;
					padding: 3rpx 10rpx;
					color: #fff;
					font-size: 24rpx;
					bottom: 40rpx;
				}
			}

			.goods-info {
				width: 69.8%;
				display: flex;
				padding-left: 20rpx;
				flex-direction: column;
				overflow: hidden;

				.goods-title {
					width: 91.43%;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: rgba(29, 29, 29, 0.94);
					word-break: break-all;
				}

				.info-down {
					width: 91.43%;
					position: relative;
					margin-top: 2.134vw;

					.price-box {
						display: flex;
						align-items: flex-end;

						.price {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 600;
							line-height: 1;
							color: #fa2c1b;
							display: flex;
							align-items: flex-end;

							view:nth-child(2) {
								font-size: 38rpx;
							}
						}

						.origin-price {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #9b9b9b;
							display: inline-block;
							text-decoration: line-through;
							margin-left: 1.67vw;
						}
					}

					.goods-sales {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #9b9b9b;
						margin-top: 2.134vw;
					}

					.buy-btn {
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}
			}
		}

		.product-item:last-child {
			margin-bottom: 0;
		}
	}

	.product-scroll::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.df {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
		justify-content: flex-start;
	}

	.goods-seckill {
		display: flex;
		align-items: center;
		background: linear-gradient(#FD362E 0%, pink);
		border-radius: 7rpx;
		font-size: 24rpx;
		overflow: hidden;
		color: white;
	}

	.goods-seckill1 {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		overflow: hidden;
		color: #FD362E;
		margin-top: 10rpx;
	}
</style>